<script setup lang="ts">
import { onMounted, ref, useAttrs, useSlots } from 'vue'

const attrs = useAttrs()
const solt = useSlots()
onMounted(() => {
  console.log(attrs)
  console.log(solt)
})

const innerRef = ref()

// 把el-input的方法暴露给父组件
defineExpose(
  new Proxy(
    {},
    {
      get(target, key) {
        return innerRef.value?.[key]
      },
      has(target, key) {
        return key in innerRef.value
      },
    },
  ),
)
</script>

<template>
  <div>
    <!-- 父组件传入属性 -->
    <el-input ref="innerRef" v-bind="attrs">
      <!-- 父组件传入插槽 -->
      <template v-for="(_, name) in solt" :key="name" #[name]="scopedData">
        <slot :name="name" v-bind="scopedData" />
      </template>
    </el-input>
  </div>
</template>

<style scoped>

</style>
